import React, { useEffect, useRef, useState } from 'react'
import PropTypes from 'prop-types'

const ParkingMap = ({
  slots,
  guides,
  onSelectSlot,
  width = 800,
  height = 500,
}) => {
  const canvasRef = useRef(null)
  const [hoveredSlot, setHoveredSlot] = useState(null)

  // 绘制箭头辅助线
  const drawArrow = (ctx, fromX, fromY, toX, toY) => {
    const headLength = 15
    const angle = Math.atan2(toY - fromY, toX - fromX)

    ctx.beginPath()
    ctx.moveTo(fromX, fromY)
    ctx.lineTo(toX, toY)
    ctx.strokeStyle = '#FF5722'
    ctx.lineWidth = 3
    ctx.stroke()

    // 绘制箭头头部
    ctx.beginPath()
    ctx.moveTo(toX, toY)
    ctx.lineTo(
      toX - headLength * Math.cos(angle - Math.PI / 6),
      toY - headLength * Math.sin(angle - Math.PI / 6)
    )
    ctx.lineTo(
      toX - headLength * Math.cos(angle + Math.PI / 6),
      toY - headLength * Math.sin(angle + Math.PI / 6)
    )
    ctx.closePath()
    ctx.fillStyle = '#FF5722'
    ctx.fill()
  }

  // 重绘整个画布
  const redrawCanvas = () => {
    const canvas = canvasRef.current
    const ctx = canvas.getContext('2d')

    // 清空画布
    ctx.clearRect(0, 0, width, height)

    // 绘制网格背景
    ctx.strokeStyle = '#e0e0e0'
    ctx.lineWidth = 1
    for (let i = 0; i < width; i += 50) {
      ctx.beginPath()
      ctx.moveTo(i, 0)
      ctx.lineTo(i, height)
      ctx.stroke()
    }
    for (let j = 0; j < height; j += 50) {
      ctx.beginPath()
      ctx.moveTo(0, j)
      ctx.lineTo(width, j)
      ctx.stroke()
    }

    // 绘制车位
    slots.forEach((slot) => {
      const isHovered = hoveredSlot === slot.id
      ctx.fillStyle = slot.occupied
        ? '#FF5252'
        : isHovered
        ? '#2196F3'
        : '#4CAF50'
      ctx.fillRect(slot.x, slot.y, 60, 30)

      // 车位边框
      ctx.strokeStyle = isHovered ? '#0D47A1' : '#2E7D32'
      ctx.lineWidth = 2
      ctx.strokeRect(slot.x, slot.y, 60, 30)

      // 车位编号
      ctx.font = '14px Arial'
      ctx.fillStyle = '#fff'
      ctx.textAlign = 'center'
      ctx.fillText(slot.id, slot.x + 30, slot.y + 18)
    })

    // 绘制引导线
    guides.forEach((guide) => {
      drawArrow(ctx, guide.start.x, guide.start.y, guide.end.x, guide.end.y)
    })
  }

  // 处理画布点击事件
  const handleCanvasClick = (e) => {
    const rect = canvasRef.current.getBoundingClientRect()
    const x = e.clientX - rect.left
    const y = e.clientY - rect.top

    // 检测点击的车位
    const clickedSlot = slots.find(
      (slot) =>
        x >= slot.x && x <= slot.x + 60 && y >= slot.y && y <= slot.y + 30
    )

    if (clickedSlot) {
      onSelectSlot(clickedSlot)
    }
  }

  // 处理鼠标悬停
  const handleMouseMove = (e) => {
    const rect = canvasRef.current.getBoundingClientRect()
    const x = e.clientX - rect.left
    const y = e.clientY - rect.top

    const hovered = slots.find(
      (slot) =>
        x >= slot.x && x <= slot.x + 60 && y >= slot.y && y <= slot.y + 30
    )

    setHoveredSlot(hovered?.id || null)
  }

  // 初始化及数据变化时重绘
  useEffect(() => {
    redrawCanvas()
  }, [slots, guides, hoveredSlot])

  return (
    <canvas
      ref={canvasRef}
      width={width}
      height={height}
      onClick={handleCanvasClick}
      onMouseMove={handleMouseMove}
      style={{
        backgroundColor: '#f5f5f5',
        borderRadius: '8px',
        boxShadow: '0 2px 10px rgba(0,0,0,0.1)',
      }}
    />
  )
}

ParkingMap.propTypes = {
  slots: PropTypes.arrayOf(
    PropTypes.shape({
      id: PropTypes.string.isRequired,
      x: PropTypes.number.isRequired,
      y: PropTypes.number.isRequired,
      occupied: PropTypes.bool.isRequired,
    })
  ).isRequired,
  guides: PropTypes.arrayOf(
    PropTypes.shape({
      start: PropTypes.shape({
        x: PropTypes.number.isRequired,
        y: PropTypes.number.isRequired,
      }).isRequired,
      end: PropTypes.shape({
        x: PropTypes.number.isRequired,
        y: PropTypes.number.isRequired,
      }).isRequired,
    })
  ).isRequired,
  onSelectSlot: PropTypes.func.isRequired,
  width: PropTypes.number,
  height: PropTypes.number,
}

export default ParkingMap
